<%--
  Created by IntelliJ IDEA.
  User: SunKai
  Date: 14-11-29
  Time: 下午5:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>漫庭网</title>
    <script>
        $(function () {
            $('.carousel').carousel({
                interval: 6000,
                pause: "hover"
            });
        });
        //a标签的单击事件，改变背景颜色
        function aClick(event) {
            var tag = event.srcElement || event.target;//找到单击被点击的元素
            var father = tag.parentNode;//找到最近的一个div标签
            while (father.nodeName != "DIV")//如果tag的父级标签不是div标签则继续往上找
            {
                father = father.parentNode;
            }
            var fatherID = father.id;//找到tag标签最近一个父级div标签的id

            //将fatherID该div对象下面的所有a标签，将各个a标签的className属性清空
            for (var i = 0; i < document.getElementById(fatherID).getElementsByTagName("a").length; i++) {
                document.getElementById(fatherID).getElementsByTagName("a")[i].className = "";
            }

            //为事件源tag对象添加className样式
            tag.className = 'bgColor';

        }
        function jumpToHouseInfo(guid) {
            var productType = $("#pageType").val();
            location.href = "/front/houseBase/showHouseInfo/" + guid + "/" + productType;
        }
    </script>
</head>

<body>
<input type="hidden" id="pageType" value="${productType}">

<div style="clear:both; float:none"></div>
<div class="container">
    <div class="list">
        <c:forEach items="${houseTypeList}" var="list" varStatus="status">
            <div class="list01 shadow02">
                <div id="myCarousel${status.index}" class="left carousel slide">
                    <ol class="carousel-indicators">
                        <c:forEach items="${list.imageGuids}" varStatus="s">
                            <c:choose>
                                <c:when test="${s.index==0}">
                                    <li data-target="#myCarousel${status.index}" data-slide-to="${s.index}"
                                        class="active"></li>
                                </c:when>
                                <c:otherwise>
                                    <li data-target="#myCarousel${status.index}" data-slide-to="${s.index}"></li>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </ol>
                    <div class="carousel-inner">
                        <c:forEach items="${list.imageGuids}" var="images" varStatus="s">
                            <c:choose>
                                <c:when test="${s.index==0}">
                                    <div class="active item">
                                        <img style="width: 478px;height: 266px;" src="/public/image/${images}"
                                             alt="image01"/>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="item">
                                        <img style="width: 478px;height: 266px;" src="/public/image/${images}"
                                             alt="image01"/>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </div>
                </div>

                <div class="information01 left">
                    <h2 class="ft01">${list.name}</h2>

                    <div class="flist01 left">房型：${list.houseTypeAsString}</div>
                    <div class="flist01 left">可住人数：${list.personNum}人</div>
                    <div class="flist01 left">建筑面积：${list.buildingArea}㎡</div>
                    <div class="flist01 left">赠送面积：${list.extraArea}㎡</div>
                    <div class="flist01 left">实际面积：${list.area}㎡</div>
                </div>
                <div class="t04 right">￥${list.price}<span class="t05">起</span></div>
                <div class="right">
                    <button type="button" class="btn3 buybtn" onclick="jumpToHouseInfo('${list.guid}')">申购</button>
                </div>
            </div>
        </c:forEach>
    </div>
    <div style="clear:both; float:none"></div>
</div>
</body>
</html>
